<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Volume Rendering - Ray Casting</title>
    <style>
      :root {
        --column-width: 50vw
      }

      @font-face {
        font-family: Latin Modern Math;
        src: url('latinmodern-math.otf');
      }

      html,
      body {
        font-family: Latin Modern Math;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
      }

      .canvas-container {
        height: calc(10 * (50vw/16));
        width: var(--column-width);
        background-color: #000;
        position: relative;
      }

      .transfer-function {
        width: var(--column-width);
        display: flex;
        justify-content: center;
        margin-top: 0.67em;
      }

      .color-stops {
        position: relative;
      }

      .color-stop {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        border: 1px solid black;
        cursor: pointer;
      }

      .color-stop input {
        cursor: pointer;
        width: 10px;
        height: 10px;
        border: none;
        padding: 0;
        position: absolute;
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <h1>Volume Rendering - Ray Casting</h1>
    <div class="canvas-container"></div>
    <div class="transfer-function"></div>
    <div id="transfer-function"></div>
    <script src="bundle.js"></script>
  </body>

</html>
